<template>
  <div class="wo">
      <div class="e">饿了么</div>
      <div class="tou">
        <div class="xiang"></div>
        <div class="zhang">
          <h4>7a9aa5a077a</h4>
          <p>136****9070</p>
        </div>
        <div class="you">账号设置</div>
      </div>
      <div class="ka">
        <div class="chi">吃货卡 | 吃货豆:1461</div>
        <p>升级超级吃货卡，每月得无门槛红包，下单5倍返吃货豆</p>
      </div>
      <div class="hongbao">
        <div class="hong">
          <h4>红包</h4>
          <p>7张今日到期</p>
        </div>
        <div class="yu">
          <h4>余额</h4>
          <p>0元</p>
        </div>
      </div>
      <div class="gongju">
        <h3>常用工具</h3>
       <div class="da">
          <div class="dizhi" v-for="(item,index) in arr" :key="index"> {{item}} </div>
       </div>
      </div>
     <div class="xia">
        <div class="yao" v-for="(item,index) in str" :key="index">
        <h4 class="si"> {{item.si}} </h4>
        <p class="pp"> {{item.pp}} </p>
        <img :src=item.img alt="">
        <div class="samllbox"> {{item.samllbox}} </div>
       </div>
     </div>
  </div>
</template>

<script>
var img1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.3png.com%2Fcf9a9f5ceaf26474749f5918a5aecddbc481.png&refer=http%3A%2F%2Fimg2.3png.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668612189&t=daf37e77feaea2c546e5c5ccee34946f";
var img2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F2%2F253%2F4066941045%2F2598058035.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668612307&t=ac4541058ae26935636ddbc571b57e30";
export default {
  data(){
    return{
      arr:["我的地址","我的客服","店铺关注","评价有礼"],
      str:[
        {si:"邀好友赚现金",pp:"最高得15元",samllbox:"去邀请",img:img1},
        {si:"饿了么服务号",pp:"关注后及时接收系统通知",samllbox:"立即关注",img:img2},
        ]
    }
  }

}
</script>

<style scoped lang="scss">
*{
  margin: 0;padding: 0;
}
.e{
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
.tou{
  display: flex;
  position: relative;
}
.tou .xiang{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(77, 159, 236);
  margin: 5px 10px;
}
.tou .you{
  width: 70px;
  height: 30px;
  border-radius: 20px;
  border: solid 1px #ccc;
  text-align: center;
  line-height: 30px;
  position: absolute;
  right: 28px;
  bottom: 18px;
}
.ka {
  width: 95%;
  height: 80px;
  background-color: rgb(77, 159, 236);
  color: #fff;
  margin: 10px auto;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}
.ka  .chi{
  font-size: 18px;
}
.ka p{
  font-size: 14px;
  margin-top: 4px;
}
.hongbao {
  width: 95%;
  height: 90px;
  background-color: #f0f0f0;
  margin: auto;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.hongbao .hong{
  width: 47.5%;
  height: 90px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin:20px 0px 15px;
}
.hongbao .hong p{
  font-size: 14px;
  color: rgb(139, 145, 145);
}
.hongbao .yu{
  width: 47.5%;
  height: 90px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin:20px 0px 15px;
}
.hongbao .yu p{
  font-size: 14px;
  color: rgb(139, 145, 145);
}
.gongju{
  width: 95%;
  height: 120px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-sizing: border-box;
  margin:10px auto;
}
.gongju .da{
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 90px;
  font-weight: bold;
}
.xia{
  display: flex;
}
.yao{
  width: 47%;
  height: 150px;
  border-radius: 8px;
  background-color: #f0f0f0;
  margin-left: 10px;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
}
.yao .pp{
  font-size: 14px;
  color: rgb(168, 163, 163);
}
.yao .samllbox{
  width: 70px;
  height: 30px;
  border: solid 1px #ccc;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  font-weight: bold;
  position: absolute;
  bottom: 13px;
  left: 50px;
}
.yao img{
  width: 60px;
  height: 50px;
  position: absolute;
  left: 53px;
  bottom: 49px;
}



</style>